一.webpack简介
1.webpack是什么
    本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。
2.webpack能干什么
    模块化打包:
        css 变成一行
        html变成一行
        js  变成一行
        去除注释
        去除多余引号

二.webpack安装和简单打包
1.全局安装
    npm install webpack -g
    npm install webpack-cli -g
    npm install webpack  webpack-cli -g
2.生成package.json
    npm init 
3.局部安装
    npm install webpack -S 
    npm install webpack  webpack-cli -S 
4.打包
    默认entry  :src/index.js
    默认output :dist/main.js

    压缩:  webpack --mode production
    未压缩:webpack --mode development

三.webpack.config讲解和使用
1.webpack本身是打包js的,但是如果想要打包js,css,html,图片...
    必须要进行相关配置
2.配置
    1》webpack四个核心概念：
        入口(entry)
        输出(output)
        loader:webpack只支持js,不支持css,图片...,如果让webpack支持使用loader
        插件(plugins):有效的打包或者压缩css,js,html,图片
    2》配置文件
        命名:webpack.config.js 

四.webpack-dev-server 
1.本地服务器(dev-server)
    安装:npm install webpack-dev-server -S
    配置:webpack.config.js:
        devServer:{
            contentBase:"",
            inline:true,
            port
            hot
        }
        package.json 
        "scripts":{
            "dev":"webpack-dev-server --open --inline"
        }

五.css-loader和file-loader
1.loader:加载程序
webpack==>本身理解js
css
html 
png jpg 
2.loader的配置
    1》引入css需要
        style-loader css-loader 
    2》下载安装
        npm install style-loader css-loader -S
    file-loader 
        npm install file-loader -S

六.webpack插件
1.html-webpack-plugin
src:开发阶段(写代码)
index.html
index.js
style.css
1.jpg 
... 
public:生产阶段(项目要上线)

2.使用 webpack.config.js 
    1》安装(下载)
        npm install html-webpack-plugin -S
    2》配置(webpack.config.js )
        const HtmlWebpackPlugin=require("html-webpack-plugin");
        plugins:[
        new HtmlWebpackPlugin({
            template:"./src/index.html",
            // filename:"a.html",
            minify:{
                removeAttributeQuotes:true,//去除多余引号
                removeComments:true,//去除注释
                removeEmptyAttributes:true,//去除空属性
                collapseWhitespace:true//去除空格
            }
        })
    ]

七.HTML的img标记
1.html-withimg-loader:让html可以支持图片
    1》安装
        npm install html-withimg-loader -S
    2》配置(webpack.config.js )   

八.字体图标

九.提取分离css
1.css提取
插件:
    1》安装(下载)
    npm install extract-text-webpack-plugin@next -S
    2》配置

十.babel
    核心:babel-core
    功能:babel-loader
        babel-preset-env
        babel-preset-react
    1》安装(下载)
    npm install babel-core babel-loader  babel-preset-env babel-preset-react -S
    2》配置
    V1:
    {
        test:/(\.jsx|\.js)$/,
        use:{
            loader:"babel-loader",
            options:{
                presets:["env","react"]
            }
        },
        exclude:/node_modules/
    }
    V2:
    新增.babelrc文件
    {
        "presets":["env","react"]
    }


十一.引入第三方文件(jquery,bootstrap)